<script setup>
  // 1.reactive: 接收对象类型数据,返回响应式对象
  import { reactive, ref } from 'vue'
  const state = reactive({
    count: 100
  })
  const setCount = () => {
    state.count++
  }
  
  // 2.ref: 接收简单类型 或复杂类型,返回响应式对象
  //  本质: 是在原有传入数据的基础上,外层包了一层对象,包成了复杂类型
  //  底层: 包成复杂类型之后,再借助reactive实现的响应式
  //  注意点: 1.脚本中访问数据,需要通过 .value  2.在template中.value不需要加
  const count = ref(1)
  console.log(count)
  const setCounByRef = () => {
    count.value++
  }

  // 推荐: 为了编码规范,统一用ref
</script>

<template>
  <div>
    <div>{{ state.count }}</div>
    <button @click="setCount">state +1</button>

    <div>{{ count }}</div>
    <button @click="setCounByRef">ref +1</button>
  </div>
</template>
